<%--
  Created by IntelliJ IDEA.
  User: 70481
  Date: 2019/8/30
  Time: 21:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>asdasd</title>
    <link href="layui/css/layui.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>

    <script type="text/javascript">
        layui.use(['table','form','layer'], function(){
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            //第一个实例
            table.render({
                elem: '#myTable'
                ,url: 'auction/showAuction' //数据接口
                ,page: true //开启分页
                ,toolbar:"#myDiv"
                ,defaultToolbar:[]
                ,cols: [[ //表头
                    {field: 'auctionName', title: '名称'}
                    ,{field: 'auctionDesc', title: '描述'}
                    ,{field: 'auctionStartTime', title: '开始时间'}
                    ,{field: 'auctionEndTime', title: '结束时间'}
                    ,{field: 'auctionStartPrice', title: '起拍价'}
                    ,{toolbar:"#myToolbar", title: '操作'}
                ]]
            });


            /*form表单的监听*/
            form.on("submit(formDemo)", function (obj) {
                // var param = obj.field.auctionId;
                var formdata = new FormData(document.getElementById("updateForm"))
                // alert(formdata)
                // console.log(formdata.get('auctionImg'));
                // alert(param+"--")
                // console.log(formdata.get("auctionId"))
                console.log(obj.field)
                if(obj.field.auctionId === "0"){
                    $.ajax({
                        url: "auction/insertAuction",
                        type: "post",
                        data: formdata,
                        async: false,
                        cache: false,
                        processData: false,
                        contentType: false,
                        success: function (data) {
                            layer.alert(data.isInsert, {time: 1250});
                            // 刷新表格
                            table.reload("myTable")
                            // 关闭弹出层
                            layer.closeAll("page")
                        }
                    })
                }else{
                    $.ajax({
                        url:"auction/uploadFile",
                        type:"post",
                        data:formdata,
                        async:false,
                        cache:false,
                        processData:false,
                        contentType:false,
                        success:function (data) {
                            layer.alert(data.isUpdate,{time:1250});
                            table.reload("myTable");
                            layer.closeAll("page");

                        }
                    })
                }
                return false;
            });











            //toolbar监听
            table.on("tool(myTable)",function (obj) {
                // alert(123)
                //获取当前行的值 以及当前点击的按钮的event
                var params = obj.data;
                var event = obj.event;

                //判断点击的按钮的event的值
                if (event == "update") {
                    //更新的操作
                    $("#myImg").prop("src", "upload/" + params.auctionPic)
                    // 1：表单 数据回显
                    form.val("updateForm", {
                        "auctionId": params.auctionId,
                        "auctionName": params.auctionName,
                        "auctionStartPrice": params.auctionStartPrice,
                        "auctionUpset": params.auctionUpset,
                        "auctionStartTime": params.auctionStartTime,
                        "auctionEndTime": params.auctionEndTime,
                        "auctionDesc": params.auctionDesc,

                    })
                    //弹出表格
                    layer.open({
                        type: 1,
                        offset: "t",
                        anim: 1,
                        area:'600px',
                        content: $("#updateForm")
                    })

                    $("#fileImg").change(function () {
                        var objurl = getObjectURL(this.files[0])
                        if (objurl) {
                            $("#myImg").attr("src", objurl)
                        }
                    })

                } else if(event === "delete") {
                    layer.confirm("确定删除吗",{icon:3,title:"提醒"},function () {
                        $.ajax({
                            url:"auction/deleteAuction",
                            data:{"id":params.auctionId},
                            success:function (data) {
                                layer.alert(data.isDelete,{time:1250});
                                table.reload("myTable");
                                layer.closeAll("page")
                            }
                        })
                    })
                }else{
                    //弹出一个页面      显示 竞拍品的信息   和  竞拍记录

                    $.ajax({
                        url:"",
                        data:{"id":params.auctionId},
                        success:function (data) {

                        }
                    })
                }
            })
        });


        layui.use("form",function () {
                var form = layui.form;
                /*一会儿再写*/
                form.on("submit(sub)",function (data) {
                    alert(1)
                    console.log(data.field)
                })
        })

        //建立一個可存取到该file的url  用于文件上传的图片回显
        function getObjectURL(file) {
            var url = null ;
            // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
            if (window.createObjectURL!=undefined) { // basic
                url = window.createObjectURL(file) ;
            } else if (window.URL!=undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
            } else if (window.webkitURL!=undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
            }
            return url ;
        }

        function addAction() {
            var layer = layui.layer;
            //弹出表格

            $("#updateForm")[0].reset();
            $("#auctionId").val("0");
            layer.open({
                type: 1,
                offset: "t",
                anim: 1,
                area:'600px',
                content: $("#updateForm")
            })

            $("#fileImg").change(function () {
                var objurl = getObjectURL(this.files[0])
                if (objurl) {
                    $("#myImg").attr("src", objurl)
                }
            })
        }



    </script>
</head>
<body>
<%--我的数据表格--%>
<table id="myTable" lay-filter = "myTable"></table>


<%--toolbar  自定义的工具栏模板--%>
<script type="text/html" id="myToolbar">
    <%--    在这里判断用户的信息--%>
    <c:if test="${sessionScope.user.userIsadmin == 0}">
        <button type="button" class="layui-btn layui-btn-radius layui-btn-warm layui-btn-sm" lay-event="update" id="update">修改</button>
        <button type="button" class="layui-btn layui-btn-radius layui-btn-danger layui-btn-sm" lay-event="delete" id="delete">删除</button>
    </c:if>
    <c:if test="${sessionScope.user.userIsadmin != 0}">
        <button type="button" class="layui-btn layui-btn-radius layui-btn-warm layui-btn-sm" lay-event="updateBook" id="shopping">竞拍</button>
    </c:if>
</script>

<%--行内菜单  用于table的表头--%>
<form id="myDiv" style="display: none;height: 10px" class="layui-form" lay-filter="myDiv">
<div>
    名称：<input type="text" name="title">
    描述：<input type="text" name="title">
    开始时间：<input type="text" name="title">
    结束时间：<input type="text" name="title">
    起拍价：<input type="text" name="title">
    <button  class="layui-btn layui-btn-radius layui-btn-primary layui-btn-xs" lay-filter="sub" >
        <i class="layui-icon layui-icon-search">搜索</i>
    </button>
    <c:if test="${sessionScope.user.userIsadmin == 0}">
        &nbsp;&nbsp;<button type="button" class="layui-btn layui-btn-radius layui-btn-primary  layui-btn-xs" id="addAuction" onclick="addAction()">
        <i class="layui-icon layui-icon-add-1">发布</i>
        </button>
    </c:if>
</div>


</form>

<%--表单的回显以及添加的数据--%>
<form class="layui-form" action=""  style="display: none;" id="updateForm" lay-filter="updateForm" method="post" enctype="multipart/form-data">
    <input type="hidden" name="auctionId" id="auctionId"  value="">
    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
            <input type="text" name="auctionName" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">起拍价</label>
        <div class="layui-input-block">
            <input type="text" name="auctionStartPrice" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">低价</label>
        <div class="layui-input-block">
            <input type="text" name="auctionUpset" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">开始时间</label>
        <div class="layui-input-block">
            <input type="text" name="auctionStartTime" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">结束时间</label>
        <div class="layui-input-block">
            <input type="text" name="auctionEndTime" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">文本域</label>
        <div class="layui-input-block">
            <textarea name="auctionDesc" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">修改图片</label>
        <div class="layui-input-block">
            <div style="width: 100px; height: 100px">
                <img src="" id="myImg" style="height: 100px; width: 100px" name="myImg">
            </div>
            <input type="file" name="auctionImg" id="fileImg" value="">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button  class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm" lay-submit lay-filter="formDemo"  lay-event="add" >提交</button>
            <button type="reset" class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm">重置</button>
        </div>
    </div>
</form>

<%--竞拍页面--%>
<div style="display: none" id="auction">
    <%--栅栏 --%>
    <div class="layui-row layui-col-space1">
        <div class="layui-col-md12">
            <div class="grid-demo" style="height: 45px">在线拍卖系统</div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-row grid-demo">

                <div class="layui-col-md4" style="border: 1px solid red; height: 72px">
                    内部列
                </div>

                <div class="layui-col-md8" style="border: 1px solid red; height: 72px">
                    内部列
                </div>
                <div class="layui-col-md4" style="border: 1px solid red; height: 72px">
                    内部列
                </div>

                <div class="layui-col-md8" style="border: 1px solid red; height: 72px">
                    内部列
                </div>

                <div class="layui-col-md4" style="border: 1px solid red; height: 72px">
                    内部列
                </div>

                <div class="layui-col-md8" style="border: 1px solid red; height: 72px">
                    内部列
                </div>


                <div class="layui-col-md4" style="border: 1px solid red; height: 72px">
                    内部列
                </div>

                <div class="layui-col-md8" style="border: 1px solid red; height: 72px">
                    内部列
                </div>


                <div class="layui-col-md4" style="border: 1px solid red; height: 72px">
                    内部列
                </div>

                <div class="layui-col-md8" style="border: 1px solid red; height: 72px">
                    内部列
                </div>
            </div>

            <%--<div class="grid-demo grid-demo-bg1" style="border: 1px solid red; height: 65px">1/4</div>--%>

        </div>
        <div class="layui-col-md6">
            <div class="grid-demo" style="border: 1px solid red; height: 360px">1/4</div>
        </div>

    </div>
</div>














</body>
</html>
